<template>
  <div
    class="piechart01"
    ref="PieChart01"
    style="width: 100%; height: 300px"
  ></div>
  <!-- 固定格式 -->
</template>

<script>
import * as echarts from 'echarts'
// 固定格式

export default {
  data() {
    return {}
  },
  // 渲染 DOM 用 mounted
  mounted() {
    // 输出函数 initPie()
    this.initPie01()
  },
  methods: {
    // 有函数 initPie() 就要输出
    initPie01() {
      // 基于准备好的 DOM，初始化 echarts 实例
      const myChart = echarts.init(this.$refs.PieChart01)
      // 配置基本信息
      const option = {
        // 标题
        // title: {
        //   text: '饼图示例'
        // },
        // 文本样式
        textStyle: {
          fontSize: 14
        },
        // 图表的工具栏
        toolbox: {
          show: true,
          // 预设
          feature: {
            mark: {
              show: true
            },
            // 数据预览 - 变成另外一种风格预览
            dataView: {
              show: true,
              readOnly: false
            },
            // 把数据从饼图切换为下拉展示数据的形式
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            },
            // 重置
            restore: {
              show: true
            },
            // 保存为图片
            saveAsImage: {
              show: true
            }
          }
        },
        // 工具提示 - 鼠标经过数据显示的样式
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br />{b}: {c} ({d}%)'
        },
        // 对应数据展示
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['早餐', '主食', '小吃', '荤菜', '素菜', '饮料']
        },
        // x 坐标轴信息
        // xAxis: {
        //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        // },
        // y 坐标轴信息
        // yAxis: {},
        // !!!核心数据!!!
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: ['10%', '75%'],
            center: ['50%', '50%'],
            label: {
              normal: {
                show: true,
                formatter: '{b}({d}%)',
                position: 'inner'
              }
            },
            data: [
              {
                value: 175,
                name: '早餐',
                selected: true
              },
              {
                value: 302,
                name: '主食'
              },
              {
                value: 171,
                name: '小吃'
              },
              {
                value: 193,
                name: '荤菜'
              },
              {
                value: 290,
                name: '素菜'
              },
              {
                value: 400,
                name: '饮料'
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.piechart01 {
  margin: 0 auto;
}
</style>
